<!--
 * @Description: 维修套餐信息
 * @Autor: 何兴家
 * @Date: 2020-12-22 15:42:58
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-04-01 09:31:08
-->
<template>
  <div>
    <div class="wrap">
      <div class="left">
        <TopFilter ref="topFilter" :list="topFilterList" :cols="1" :labelWidth="90" :collapse="false" @filterChange="handleSearch"></TopFilter>
      </div>
      <div class="right">
        <FilterTable
          ref="table"
          height="auto"
          :isToperInfo="false"
          :isColumnFilter="false"
          selectionType="single"
          :columns="columns"
          :fetchapi="fetchapi"
          :params="fetchParams"
          :datakey="'rows'"
          :onRowSelectChange="handleTableRowSelectChange"
          :onSyncTableData="handleSyncTableData"
          :onColumnsChange="columns => (this.columns = columns)"
        >
        </FilterTable>
      </div>
    </div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="套餐项目" name="套餐项目">
        <FilterTable
          ref="labourTable"
          height="auto"
          :isToperInfo="false"
          :isColumnFilter="false"
          :isSelectColumn="false"
          :columns="laobourColumns"
          :dataSource="labourDataSource"
          :onSyncTableData="handleSyncLabourTableData"
          :onColumnsChange="columns => (this.laobourColumns = columns)"
        >
        </FilterTable>
      </el-tab-pane>
      <el-tab-pane label="套餐配件" name="套餐配件">
        <FilterTable
          ref="partTable"
          height="auto"
          :isToperInfo="false"
          :isColumnFilter="false"
          :isSelectColumn="false"
          :columns="partColumns"
          :dataSource="partDataSource"
          :onSyncTableData="handleSyncPartTableData"
          :onColumnsChange="columns => (this.partColumns = columns)"
        >
        </FilterTable>
      </el-tab-pane>
    </el-tabs>

    <div class="dialogBottmView">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="btnIsLoading">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction, findFormItem, findTableItem } from '@/utils';
import { getAppId } from '@/assets/js/auth';

import { getWxlxSelect } from '@/api/repair/repairReception/customer';
import { findRepairSetMeal, getSfqfSelect, qeuryLabourBySetMealCode, qeuryPartBySetMealCode } from '@/api/repair/repairReception/customer';

export default {
  props: ['powerType', 'selectedSetMealCodeList', 'residueSetMealCount'],
  mixins: [dictionary],
  data() {
    this.selectedSetMealList = [];
    return {
      topFilterList: this.createTopFIlterList(),
      columns: this.createTableColumns(),
      laobourColumns: this.createLabourColumns(),
      partColumns: this.createPartColumns(),
      fetchapi: findRepairSetMeal,
      fetchParams: { xhrAbort: true },
      syncTableData: [], // 同步的table数据
      syncLabourTableData: [], // 同步的项目table数据
      syncPartTableData: [], // 同步的配件table数据
      activeTab: '套餐项目',
      labourDataSource: [], // 维修项目数据源
      partDataSource: [], // 维修配件数据源
      btnIsLoading: false
    };
  },
  mounted() {
    this.queryRepairTypeDict();
    this.judgeIsAFBusiness(); // 判断是否为AF业务决定字段显示隐藏
  },
  methods: {
    createTopFIlterList() {
      return [
        {
          type: 'INPUT',
          label: '套餐代码',
          fieldName: 'PACKAGE_CODE'
        },
        {
          type: 'INPUT',
          label: '套餐名称',
          fieldName: 'PACKAGE_TYPE_NAME'
        },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'REPAIR_TYPE_CODE',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '是否OEM套餐',
          fieldName: 'DATA_SOURCES',
          itemList: [
            { text: '店端', value: '10451001' },
            { text: '厂端', value: '10451002' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '已添加',
          dataIndex: 'isAdded',
          disabled: true,
          editable: true,
          defaultEditable: true,
          editType: 'checkbox',
          editItems: [
            { text: '', trueValue: 10041001 },
            { text: '', falseValue: 10041002 }
          ]
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_CODE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        {
          title: '套餐代码',
          dataIndex: 'PACKAGE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '套餐名称',
          dataIndex: 'PACKAGE_TYPE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'SERIES_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否为套餐包套餐',
          dataIndex: 'IS_ISSUE_PACKAGE',
          dictItems: this.createDictList('1004').map(item => ({ text: item.text, value: item.value + '' }))
        },
        {
          title: '默认收费区分',
          dataIndex: 'CHARGE_PARTITION_CODE',
          dictItems: []
        }
      ];
    },
    createLabourColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '标准工时',
          dataIndex: 'STD_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工工时',
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔工时',
          dataIndex: 'CLAIM_LABOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '套餐代码',
          dataIndex: 'PACKAGE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createPartColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '配件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
        // {
        //   title: '项目代码',
        //   dataIndex: 'LABOUR_CODE',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // }
      ];
    },
    collapseHandle() {
      this.nextTick(() => {
        this.refs.table.EXECUTE_RESET_HEIGHT();
      });
    },
    // 获取维修类型
    async queryRepairTypeDict() {
      let res = await getWxlxSelect();
      if (res.resultCode == 200) {
        let repairTypeDict = res.data.map(item => ({ text: item.REPAIR_TYPE_NAME, value: item.REPAIR_TYPE_CODE + '' }));
        findFormItem(this.topFilterList, 'REPAIR_TYPE_CODE').itemList = repairTypeDict;
        findTableItem(this.columns, 'REPAIR_TYPE_CODE').dictItems = findTableItem(this.columns, 'REPAIR_TYPE_CODE').filterItems = repairTypeDict;
      }
    },
    // 获取收费区分
    async queryChargePartitionList() {
      let res = await getSfqfSelect();
      if (res.resultCode == 200) {
        let sfqfDict = res.data.map(item => ({ text: item.CHARGE_PARTITION_NAME, value: item.CHARGE_PARTITION_CODE + '' }));
        findTableItem(this.columns, 'CHARGE_PARTITION_CODE').dictItems = sfqfDict;
      }
    },
    // 点击搜索
    handleSearch(e) {
      this.labourDataSource = [];
      this.partDataSource = [];
      this.fetchParams = Object.assign({}, this.fetchParams, e, { xhrAbort: false });
    },
    // 同步table数据
    handleSyncTableData(list) {
      list.forEach(item => {
        this.selectedSetMealCodeList.includes(item.PACKAGE_CODE) && (item.isAdded = 10041001);
      });
      this.syncTableData = list;
    },
    handleSyncLabourTableData(list) {
      this.syncLabourTableData = list;
    },
    handleSyncPartTableData(list) {
      this.syncPartTableData = list;
    },
    // 顶部table行项选择变化
    async handleTableRowSelectChange(list) {
      this.selectedSetMealList = list;
      if (list.length) {
        this.btnIsLoading = true;
        try {
          await this.querySetMealLabourByCode(list[0].PACKAGE_CODE, list[0].PACKAGE_TYPE_NAME);
          await this.querySetMealPartByCode(list[0].PACKAGE_CODE, list[0].PACKAGE_TYPE_NAME);
        } catch (err) {
          console.log(err, '查询配件项目失败');
        } finally {
          this.btnIsLoading = false;
        }
      }
    },
    // 判断是否为AF业务,只有AF业务显示套餐包相关
    judgeIsAFBusiness() {
      if (getAppId() == 'beijing') {
        this.columns.pop();
        this.columns.pop();
      } else {
        this.queryChargePartitionList();
      }
    },
    // 根据活动代码查询项目
    async querySetMealLabourByCode(code, name) {
      this.$refs.labourTable.START_LOADING();
      try {
        let res = await qeuryLabourBySetMealCode(code, name);
        if (res.resultCode == 200) {
          this.labourDataSource = res.data;
        }
      } catch (err) {
        console.log(err, '查询维修项目失败');
      } finally {
        this.$refs.labourTable.STOP_LOADING();
      }
    },
    // 根据活动代码查询配件
    async querySetMealPartByCode(code, name) {
      this.$refs.partTable.START_LOADING();
      try {
        let storageType = this.powerType + '';
        storageType = storageType.replace(/6008/g, '5000');
        let res = await qeuryPartBySetMealCode({
          packageCode: code,
          powerType: storageType
        });
        if (res.resultCode == 200) {
          this.partDataSource = res.data;
        }
      } catch (err) {
        console.log(err, '查询维修项目失败');
      } finally {
        this.$refs.partTable.STOP_LOADING();
      }
    },
    handleCancel() {
      this.$emit('close');
    },
    async handleConfirm() {
      if (!this.selectedSetMealList.length) return notifyAction('请选择套餐', 'warning');
      if (this.selectedSetMealList[0].isAdded == 10041001) return notifyAction('此套餐已选择,请选择其他套餐', 'warning');

      // 带回前处理部分数据
      this.syncLabourTableData.forEach(item => {
        delete item.ITEM_ID;
        item.IS_USE_SET_MEAL_PACKAGE = 10041002;
      });
      this.syncPartTableData.forEach(item => {
        delete item.ITEM_ID;
        item.IS_USE_SET_MEAL_PACKAGE = 10041002;
      });

      if (this.selectedSetMealList[0].IS_ISSUE_PACKAGE == 10041001) {
        if (!this.residueSetMealCount) return notifyAction('此车辆未拥有有效的服务包，不能选择套餐包套餐！', 'warning');
        this.syncLabourTableData.forEach(item => {
          item.IS_USE_SET_MEAL_PACKAGE = 10041001;
          item.CHARGE_PARTITION_CODE = this.selectedSetMealList[0].CHARGE_PARTITION_CODE;
        });
        this.syncPartTableData.forEach(item => {
          item.IS_USE_SET_MEAL_PACKAGE = 10041001;
          item.CHARGE_PARTITION_CODE = this.selectedSetMealList[0].CHARGE_PARTITION_CODE;
        });
      }

      this.$emit('close');
      this.$emit('onConfirm', {
        labourList: this.syncLabourTableData,
        partList: this.syncPartTableData
      });
    }
  }
};
</script>

<style scoped>
.wrap {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 30%;
}
.right {
  width: 68%;
}
</style>
